import React, { useEffect, useState } from 'react'
import {
    Button,
    Form,
    Input,
    TreeSelect,
} from 'antd';
import '../components.css'
import { Link, useLocation } from 'react-router-dom'
import EmployeesService from '../../services/EmployeesService';
import { CloseCircleOutlined, CaretUpOutlined, MailOutlined } from '@ant-design/icons';



export default function UpdateEmployee() {
    const [employeeName, setEmployeeName] = useState("")
    const [employeePhone, setEmployeePhone] = useState("")
    const [employeeAddress, setEmployeeAddress] = useState("")
    const [employeeGender, setEmployeeGender] = useState("")
    const [employeeJob, setEmployeeJob] = useState("")
    const [employeeId, setEmployeeId] = useState("")

    const location = useLocation()
    let path = location.pathname;
    let id = path.split('/')[3];

    const updateEmployee = (e) => {
        e.preventDefault();
        const employee = { employeeName, employeePhone, employeeAddress, employeeGender, employeeJob, employeeId };
        console.log(employee);
        EmployeesService.updateEmployee(id,employee ).then(response => {

        }).catch(error => {
            console.log(error);
        })
    }

    useEffect(() => {
        EmployeesService.getEmployeeById(id).then(response => {
            setEmployeeName(response.data.employeeName);
            setEmployeePhone(response.data.employeePhone);
            setEmployeeAddress(response.data.employeeAddress);
            setEmployeeId(response.data.employeeId);
            setEmployeeJob(response.data.employeeJob);
            setEmployeeGender(response.data.employeeGender);

        }).catch(error => {
            console.log(error);
        })
    }, [])

    return (
        <div className='UpdataEmployee'>
            <div className="title" style={{ paddingBottom: '30px' }}>Update Employee</div>
            <Form
                labelCol={{
                    span: 5,
                }}
                wrapperCol={{
                    span: 14,
                }}
                style={{
                    marginLeft: '2%',
                }}
                layout="horizontal"
            >
                <Form.Item label="Employee Name" tooltip="What do you want others to call you?">
                    <Input value={employeeName} onChange={e => setEmployeeName(e.target.value)} />
                </Form.Item>

                <Form.Item label="Employee Phone" >
                    <Input value={employeePhone} onChange={e => setEmployeePhone(e.target.value)} />
                </Form.Item>

                <Form.Item label="Employee Address" >
                    <Input value={employeeAddress} onChange={e => setEmployeeAddress(e.target.value)} suffix={<MailOutlined />} />
                </Form.Item>
                <Form.Item label="Employee Id" tooltip="What do you want others to call you?">
                    <Input value={employeeId} onChange={e => setEmployeeId(e.target.value)} />
                </Form.Item>

                <Form.Item label="Employee Gender" >
                    <Input value={employeeGender} onChange={e => setEmployeeGender(e.target.value)} />
                </Form.Item>

                <Form.Item label="Employee Job" >
                    <Input value={employeeJob} onChange={e => setEmployeeJob(e.target.value)} suffix={<MailOutlined />} />
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 5,
                        span: 16,
                    }}
                    style={{
                        marginTop: '50px'
                    }}
                >
                    <Button type="primary" onClick={(e) => updateEmployee(e)} htmlType="submit" icon={<CaretUpOutlined style={{ marginRight: "2px" }} />}>
                        <Link to='/employeelist' style={{ color: "white" }}>Update</Link>
                    </Button>
                    <Button type='danger' style={{ marginLeft: "25px" }} icon={<CloseCircleOutlined style={{ marginRight: "2px" }} />}>
                        <Link to='/employeelist' style={{ color: "white" }}>Close</Link>
                    </Button>
                </Form.Item>
            </Form>
        </div>

    )
}
